<template>
  <a-card>
    <ContentHeader />
    <div class="table-action">
      <a-row class="row-item-search">
        <a-form class="search-form" layout="inline">
          <a-form-item label="姓名/手机号/身份证">
            <a-input
              v-model:value="from.search"
              placeholder="姓名/手机号/身份证"
            />
          </a-form-item>
          <a-form-item label="创建时间">
            <a-range-picker
              v-model:value="from.create_time"
              format="YYYY-MM-DD"
            />
          </a-form-item>
          <a-form-item class="search-btn">
            <a-button type="primary" @click="queryTable">查询</a-button>
          </a-form-item>
        </a-form>
      </a-row>
    </div>
    <div class="table-tab">
      <a-button v-if="auth('add')" @click="add">
        <template #icon><PlusOutlined /></template>
        新增
      </a-button>
      <a-button v-if="auth('plus')" @click="plus">
        <template #icon><UploadOutlined /></template>
        导入
      </a-button>
      <a-button v-if="auth('down')" @click="down">
        <template #icon><DownloadOutlined /></template>
        下载模板
      </a-button>
    </div>
    <a-table
      rowKey="id"
      :columns="columns"
      :data-source="data.list"
      :pagination="{
        total: total,
        current: from.page,
        pageSize: pageSize,
      }"
      @change="handleTableChange"
    >
      <template #name="value">
        <div style="color: #1890ff">{{ value.record.name }}</div>
        <div style="font-size: 12px; color: #aaa" v-if="value.record.user">
          会员ID：{{ value.record.user.user_id }}
        </div>
        <div style="font-size: 12px; color: #ff5722" v-if="!value.record.user">
          未注册
        </div>
      </template>
      <template #realnameType="value">
        {{ value.record.realnameType ? value.record.realnameType.name : "---" }}
      </template>
      <template #detail="value">
        {{ value.record.province ? value.record.province.name : "" }}
        {{ value.record.city ? value.record.city.name : "" }}
        {{ value.record.region ? value.record.region.name : "" }}
        {{ value.record.detail }}
      </template>
      <template #action="value">
        <a v-if="auth('edit')" @click="edit(value.record)">编辑</a>
        <a-divider type="vertical" />
        <a v-if="auth('delete')" @click="deletesfun(value.record)">删除</a>
      </template>
    </a-table>
    <AddForm @okCallback="okCallback" ref="adds" />
    <Realname @okCallback="okCallback" ref="edits" />
    <PlusRealname @okCallback="okCallback" ref="plusReal" />
  </a-card>
</template>
<script>
import { defineComponent, createVNode, reactive, toRefs } from "vue";
import { list, deletes, regionTree, realnameType } from "@/api/user/Realname";
import { Modal } from "ant-design-vue";
import {
  ExclamationCircleOutlined,
  DownloadOutlined,
  PlusOutlined,
  UploadOutlined,
} from "@ant-design/icons-vue";
import { notice, auth, refreshScrollTop } from "@/config";
import { exportExcel } from "@/config/utils/excel";
import AddForm from "./module/addRealname";
import Realname from "./module/editRealname";
import PlusRealname from "./module/plusRealname";
export default defineComponent({
  components: {
    DownloadOutlined,
    PlusOutlined,
    UploadOutlined,
    AddForm,
    Realname,
    PlusRealname,
  },
  setup() {
    const columns = [
      {
        title: "编号",
        dataIndex: "id",
      },
      {
        title: "姓名（所属用户）",
        dataIndex: "name",
        slots: {
          customRender: "name",
        },
      },
      {
        title: "手机号",
        dataIndex: "mobile",
      },
      {
        title: "身份证",
        dataIndex: "id_number",
      },
      {
        title: "身份类型",
        dataIndex: "realnameType",
        slots: {
          customRender: "realnameType",
        },
      },
      {
        title: "工作职务",
        dataIndex: "duties_name",
      },
      {
        title: "所属地区",
        dataIndex: "detail",
        slots: {
          customRender: "detail",
        },
      },

      {
        title: "创建时间",
        dataIndex: "create_time",
      },
      {
        title: "操作",
        dataIndex: "action",
        width: "180px",
        slots: {
          customRender: "action",
        },
      },
    ];

    // 定义动态数据
    const state = reactive({
      data: [],
      adds: undefined,
      edits: undefined,
      plusReal: undefined,
      pageSize: 15,
      total: 0,
      from: {
        page: 1,
        search: "",
        create_time: [],
      },

      regionList: [],
      typeList: [],
    });

    // 获取数据
    const getTable = (where) => {
      list(where).then((res) => {
        state.data = res.data;
        state.total = res.data.total;
        state.pageSize = res.data.listRows;
      });
    };
    getTable([]);
    // 获取地区树
    const regionTreefun = () => {
      regionTree().then((res) => {
        state.regionList = res.data;
      });
    };
    regionTreefun();

    // 获取实名身份种类列表
    const realnameTypefun = () => {
      realnameType().then((res) => {
        state.typeList = res.data;
      });
    };
    realnameTypefun();

    // 分页查询
    const handleTableChange = (pag) => {
      state.from.page = pag.current;
      getTable(state.from);
      // 重置滚动高度
      refreshScrollTop();
    };

    // 新增
    const add = () => {
      state.adds.show(state.regionList, state.typeList);
    };
    // 编辑
    const edit = (item) => {
      state.edits.show(state.regionList, state.typeList, item);
    };
    // 导入
    const plus = () => {
      state.plusReal.show(state.regionList, state.typeList);
    };
    // 下载
    const down = () => {
      exportExcel(
        [
          { key: "name", title: "姓名" },
          { key: "mobile", title: "手机号" },
          { key: "duties_name", title: "身份证号" },
          { key: "id_number", title: "职务名称" },
        ],
        [
          {
            name: "张三",
            mobile: "15333333333",
            duties_name: "522425199802051234",
            id_number: "测试岗",
          },
          {
            name: "李四",
            mobile: "18333333333",
            duties_name: "322425199902051231",
            id_number: "开发岗",
          },
        ],
        "实名认证模板.xlsx"
      ).then(() => {
        notice("success", "正在下载");
      });
    };

    // 删除菜单
    const deletesfun = (item) => {
      Modal.confirm({
        title: () =>
          "你真的要删除(名称:" + item.name + ",ID:" + item.id + ")这条记录吗?",
        icon: () => createVNode(ExclamationCircleOutlined),
        content: () => "注意：确定删除后不可恢复",
        okText: () => "确定删除",
        okType: "danger",
        cancelText: () => "取消操作",
        onOk() {
          deletes({ id: item.id }).then((res) => {
            getTable();
            notice(res.status == 200 ? "success" : "error", res.message);
          });
        },
        onCancel() {},
      });
    };
    const queryTable = () => {
      getTable(state.from);
    };
    // 新增成功回调
    const okCallback = () => {
      getTable();
    };
    return {
      ...toRefs(state),
      columns,
      add,
      edit,
      plus,
      down,
      deletesfun,
      okCallback,
      handleTableChange,
      auth,
      queryTable,
    };
  },
});
</script>
<style scoped>
.popover-button {
  margin-right: 5px;
  padding: 0 5px;
  font-size: 12px;
}
</style>
